<template>
  <section>
  <div class="image-options">
    <button @click="rotate">旋转</button>
  </div>
  <div class="outer_box">
    <!-- 因为旋转是在中心点旋转的,而放大缩小是在左上角 -->
    <!-- 所以给图片的父元素加上放大缩小 -->
    <!-- 给图片加上旋转 -->
    <div class="img_box"
         :style="{transform:'scale('+multiples+')',transformOrigin:'top left'}">
      <img :src="image"
           alt=""
           :style="{transform:'rotateZ('+deg+'deg)'}" v-drag />
    </div>
<!--    &lt;!&ndash; 点击时旋转90度 &ndash;&gt;-->
<!--    <button @click="magnify">放大</button>-->
<!--    &lt;!&ndash; 缩小0.25 &ndash;&gt;-->
<!--    <button @click="shrink">缩小</button>-->
<!--    &lt;!&ndash; 放大0.25 &ndash;&gt;-->
  </div>
  </section>
</template>
<script>
  export default{
    props:{
      image:{
        type:String,
        default:'https://publish-pic-cpu.baidu.com/cf60d547-a35c-4e77-8ef3-30d0e5b0e48b.jpeg@q_90,w_450'
      }
    },
    data(){
      return{
        imgSrc:'https://publish-pic-cpu.baidu.com/cf60d547-a35c-4e77-8ef3-30d0e5b0e48b.jpeg@q_90,w_450',
        deg:0,
        multiples:1,
      }
    },
    methods:{
      // 放大
      magnify(){
        if(this.multiples >= 3){
          return
        }
        this.multiples += 0.15
      },
      // 缩小
      shrink(){
        if(this.multiples <= 0.25){
          return
        }
        this.multiples -= 0.15
      },
      // 旋转
      rotate(){
        this.deg += 90;
        if(this.deg >= 360){
          this.deg = 0
        }
      },
      handleScroll (e) {
        e.preventDefault()
        console.log('e===>',e)
        if(e.wheelDelta>0){
          // 向上  大
          this.magnify()
        }
        if(e.wheelDelta<0){
          // 向下 小
          this.shrink()
        }
      }
    },
    mounted(){
      // chrome and ie
      window.addEventListener('mousewheel',this.handleScroll,false)
      //// firefox
      window.addEventListener('DOMMouseScroll',this.handleScroll,false)
    }
  }
</script>
<style scoped>
  .image-options{
    padding:10px;
    background-color: #f8f8f8;
  }
  .outer_box{
    width: 100%;
    height: 760px;
  }
  .outer_box>div{
    white-space: nowrap;
    display: inline-block;
  }
  .outer_box>div>img{
    width:auto;
    height:auto;
    position: absolute;
  }
</style>